<%@page import="com.chinasoftosg.sicap.utils.CommonUtil"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<base href="${basePath }">
<TITLE>ZTREE DEMO - left_menu</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="source/zTree/css/demo.css" type="text/css">
<link rel="stylesheet" href="source/zTree/css/zTreeStyle/zTreeStyle.css"
	type="text/css">
<script type="text/javascript" src="source/zTree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript"
	src="source/zTree/js/jquery.ztree.core-3.1.js"></script>
<!--  <script type="text/javascript" src="../../../js/jquery.ztree.excheck-3.1.js"></script>
	  <script type="text/javascript" src="../../../js/jquery.ztree.exedit-3.1.js"></script>-->
<SCRIPT type="text/javascript">
<!--
	var setting = {
		view : {
			showLine : false,
			dblClickExpand : false
		},
		data : {
			simpleData : {
				enable : true
			}
		},
		callback : {
			//	onNodeCreated : this.onNodeCreated,
			beforeExpand : beforeExpand,
			onExpand : onExpand,
			onClick : onClick
		}
	};

	var zNodes =
<%=CommonUtil.getNavTree(session)%>
	;
	
	function singlePath(newNode) {
			if (newNode === curExpandNode) return;
			if (curExpandNode && curExpandNode.open==true) {
				var zTree = $.fn.zTree.getZTreeObj("treeDemo");
				if (newNode.parentTId === curExpandNode.parentTId) {
					zTree.expandNode(curExpandNode, false);
				} else {
					var newParents = [];
					while (newNode) {
						newNode = newNode.getParentNode();
						if (newNode === curExpandNode) {
							newParents = null;
							break;
						} else if (newNode) {
							newParents.push(newNode);
						}
					}
					if (newParents!=null) {
						var oldNode = curExpandNode;
						var oldParents = [];
						while (oldNode) {
							oldNode = oldNode.getParentNode();
							if (oldNode) {
								oldParents.push(oldNode);
							}
						}
						if (newParents.length>0) {
							for (var i = Math.min(newParents.length, oldParents.length)-1; i>=0; i--) {
								if (newParents[i] !== oldParents[i]) {
									zTree.expandNode(oldParents[i], false);
									break;
								}
							}
						} else {
							zTree.expandNode(oldParents[oldParents.length-1], false);
						}
					}
				}
			}
			curExpandNode = newNode;
		}

	function beforeClick(treeId, node) {
		if (node.isParent) {
			if (node.level === 0) {
				var pNode = curMenu;
				while (pNode && pNode.level !== 0) {
					pNode = pNode.getParentNode();
				}
				if (pNode !== node) {
					var a = $("#" + pNode.tId + "_a");
					a.removeClass("cur");
					zTree_Menu.expandNode(pNode, false);
				}
				a = $("#" + node.tId + "_a");
				a.addClass("cur");

				var isOpen = false;
				for ( var i = 0, l = node.children.length; i < l; i++) {
					if (node.children[i].open) {
						isOpen = true;
						break;
					}
				}
				if (isOpen) {
					zTree_Menu.expandNode(node, true);
					curMenu = node;
				} else {
					zTree_Menu
							.expandNode(
									node.children[0].isParent ? node.children[0]
											: node, true);
					curMenu = node.children[0];
				}
			} else {
				zTree_Menu.expandNode(node);
			}
		}
		return !node.isParent;
	}
	function onExpand(event, treeId, treeNode) {
		curExpandNode = treeNode;
	}
	function onClick(e, treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		zTree.expandNode(treeNode);
	}

	var curExpandNode = null;
	function beforeExpand(treeId, treeNode) {
		var pNode = curExpandNode ? curExpandNode.getParentNode() : null;
		var treeNodeP = treeNode.parentTId ? treeNode.getParentNode() : null;
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		for ( var i = 0, l = !treeNodeP ? 0 : treeNodeP.children.length; i < l; i++) {
			if (treeNode !== treeNodeP.children[i]) {
				zTree.expandNode(treeNodeP.children[i], false);
			}
		}
		while (pNode) {
			if (pNode === treeNode) {
				break;
			}
			pNode = pNode.getParentNode();
		}
		if (!pNode) {
			singlePath(treeNode);
		}

	}

	$(document).ready(function() {
		$.fn.zTree.init($("#treeDemo"), setting, zNodes);
		// 		zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
		// 		curMenu = zTree_Menu.getNodes()[0].children[0].children[0];
		// 		zTree_Menu.selectNode(curMenu);
		// 		var a = $("#" + zTree_Menu.getNodes()[0].tId + "_a");
		// 		a.addClass("cur");
	});
//-->
</SCRIPT>
<style type="text/css">
.ztree li a.level0 {
	width: 200px;
	height: 20px;
	text-align: center;
	display: block;
	background-color: #0B61A4;
	border: 1px silver solid;
}

.ztree li a.level0.cur {
	background-color: #66A3D2;
}

.ztree li a.level0 span {
	display: block;
	color: white;
	padding-top: 3px;
	font-size: 12px;
	font-weight: bold;
	word-spacing: 2px;
}

.ztree li a.level0 button {
	float: right;
	margin-left: 10px;
	visibility: visible;
	display: none;
}

.ztree li button.switch.level0 {
	display: none;
}
</style>
</HEAD>

<BODY>
	<h1>左侧菜单</h1>
	<h6>[ 文件路径: super/left_menu.html ]</h6>
	<div class="content_wrap">
		<div class="zTreeDemoBackground left">
			<ul id="treeDemo" class="ztree"></ul>
		</div>
		<div class="right">
			<ul class="info">
				<li class="title"><h2>实现方法说明</h2>
					<ul class="list">
						<li>在 “Demo 演示”中的左侧菜单就是用 zTree 实现的，主要是靠 css 样式负责排版，利用 setting
							中的配置进行功能制作，本 Demo 对实现 左侧菜单进行简单的介绍，你也可以通过查看 “Demo 演示”页面的源码深入了解。</li>
						<li class="highlight_red">1、关于 css 完全可以根据自己的需要进行个性化调整，例如：此
							Demo 的菜单样式 就 与 “Demo 演示”页面的不一样，仅供对比参考</li>
						<li class="highlight_red">2、主要用到的配置有：<br />
							&nbsp;&nbsp;&nbsp;&nbsp;setting.view.showIcon / showLine /
							selectedMulti / dblClickExpand<br />
							&nbsp;&nbsp;&nbsp;&nbsp;setting.callback.onNodeCreated /
							beforeClick / onClick</li>
						<li>3、是否需要限制单一路径展开，完全由你的需求而定，实现代码可参考 "保持展开单一路径"</li>
						<li>4、其他辅助规则，请根据实际情况自行编写</li>
					</ul>
				</li>
			</ul>
		</div>
	</div>
</BODY>
</HTML>
